<template>
  <div>
    <div id="echart" style="height: 1000px"></div>
    <div>
      <el-button @click="toworld">国外疫情地图</el-button>
      <el-button @click="topiechart">国内疫情数据</el-button>
    </div>
    <div class="word">
      <p style="font-style: normal">积极防护，保护自己，戴口罩，勤洗手</p>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      timer: null,
    };
  },

  computed: {
    ...mapState("dataList", ["dataList"]),
  },
  created() {
    this.findData();
  },

  methods: {
    ...mapActions("dataList", ["page_query"]),
    toworld() {
      this.$router.push({
        path: "/map/worldMap",
      });
    },
    topiechart() {
      this.$router.push({
        path: "/map/pie",
      });
    },
    findData() {
      this.page_query({
        page: 1,
        pageSize: 10,
      }).then(() => {
        this.initEchart();
      });
    },
    initEchart() {
      echarts.init(document.getElementById("echart")).dispose();
      //初始化图标
      var myChart = echarts.init(document.getElementById("echart"));

      // 指定图表的配置项和数据
      var option = {
        backgroundColor: "#10aeb5",
        title: {
          text: "国内各地区疫情统计汇总",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          type: 'scroll',
          top:20,
          right: 10,
          data: [
            "美国",
            "印度",
            "巴西",
            "俄罗斯",
            "英国",
            "法国",
            "土耳其",
            "意大利",
            "西班牙",
            "德国",
            "哥伦比亚",
            "阿根廷",
            "墨西哥",
            "波兰",
            "伊朗",
            "南非",
            "乌克兰",
            "秘鲁",
            "荷兰",
            "印度尼西亚",
            "捷克",
            "比利时",
            "罗马尼亚",
            "智利",
            "加拿大",
            "伊拉克",
            "孟加拉国",
            "巴基斯坦",
            "菲律宾",
            "瑞典",
            "瑞士",
            "以色列",
            "摩洛哥",
            "葡萄牙",
            "奥地利",
            "沙特阿拉伯",
            "塞尔维亚",
            "匈牙利",
            "约旦",
            "尼泊尔",
            "巴拿马",
            "日本",
            "格鲁吉亚",
            "阿塞拜疆",
            "阿拉伯联合酋长国",
            "厄瓜多尔",
            "克罗地亚",
            "保加利亚",
            "白俄罗斯",
            "黎巴嫩",
            "斯洛伐克",
            "多米尼加",
            "哥斯达黎加",
            "丹麦",
            "玻利维亚",
            "亚美尼亚",
            "哈萨克斯坦",
            "科威特",
            "立陶宛",
            "突尼斯",
            "摩尔多瓦",
            "卡塔尔",
            "埃及",
            "巴勒斯坦",
            "希腊",
            "危地马拉",
            "阿曼",
            "斯洛文尼亚",
            "缅甸",
            "埃塞俄比亚",
            "洪都拉斯",
            "马来西亚",
            "委内瑞拉",
            "波黑",
            "爱尔兰",
            "巴拉圭",
            "利比亚",
            "阿尔及利亚",
            "肯尼亚",
            "巴林",
            "尼日利亚",
            "北马其顿",
            "吉尔吉斯斯坦",
            "乌兹别克斯坦",
            "韩国",
            "阿尔巴尼亚",
            "新加坡",
            "加纳",
            "阿富汗",
            "挪威",
            "黑山",
            "萨尔瓦多",
            "卢森堡",
            "斯里兰卡",
            "乌干达",
            "爱沙尼亚",
            "澳大利亚",
            "喀麦隆",
            "纳米比亚",
            "塞浦路斯",
            "苏丹",
            "科特迪瓦",
            "赞比亚",
            "乌拉圭",
            "塞内加尔",
            "莫桑比克",
            "刚果（金）",
            "马达加斯加",
            "安哥拉",
            "津巴布韦",
            "法属波利尼西亚",
            "博茨瓦纳",
            "毛里塔尼亚",
            "马尔代夫",
            "几内亚",
            "法属圭亚那",
            "马耳他",
            "塔吉克斯坦",
            "牙买加",
            "古巴",
            "佛得角",
            "叙利亚",
            "伯利兹",
            "斯威士兰",
            "海地",
            "其他",
          ],
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "累计确诊人数",
            type: "pie",
            radius: [10, 900],
            center: ["70%", "92%"],
            roseType: "area",
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data: [
              { value: 22473915, name: "美国" },
              { value: 10375478, name: "印度" },
              { value: 8015920	, name: "巴西" },
              { value: 3379103	, name: "俄罗斯" },
              { value: 2957472	, name: "英国" },
              { value: 2747135	, name: "法国" },
              { value: 2307581	, name: "土耳其" },
              { value: 2237890	, name: "意大利" },
              { value: 2050360	, name: "西班牙" },
              { value: 1898320	, name: "德国" },
              { value: 1755568	, name: "哥伦比亚" },
              { value: 1703352	, name: "阿根廷" },
              { value: 1507931	, name: "墨西哥" },
              { value: 1376389	, name: "波兰" },
              { value: 1280438	, name: "伊朗" },
              { value: 1192570	, name: "南非" },
              { value: 1110015	, name: "乌克兰" },
              { value: 1029471	, name: "秘鲁" },
              { value: 858914	, name: "荷兰" },
              { value: 818386		, name: "印度尼西亚" },
              { value: 822716	, name: "捷克" },
              { value: 660703	, name: "比利时" },
              { value: 668202	, name: "罗马尼亚" },
              { value: 633381	, name: "智利" },
              { value: 644348	, name: "加拿大" },
              { value: 602331	, name: "伊拉克" },
              { value: 521382	, name: "孟加拉国" },
              { value: 499517	, name: "巴基斯坦" },
              { value: 485797	, name: "菲律宾" },
              { value: 489471	, name: "瑞典" },
              { value: 477983	, name: "瑞士" },
              { value: 477357	, name: "以色列" },
              { value: 450221	, name: "摩洛哥" },
              { value: 466709	, name: "葡萄牙" },
              { value: 379071	, name: "奥地利" },
              { value: 363692	, name: "沙特阿拉伯" },
              { value: 356125	, name: "塞尔维亚" },
              { value: 340459	, name: "匈牙利" },
              { value: 305163	, name: "约旦" },
              { value: 262784, name: "尼泊尔" },
              { value: 282662	, name: "巴拿马" },
              { value: 282662	, name: "日本" },
              { value: 232079, name: "格鲁吉亚" },
              { value: 221401, name: "阿塞拜疆" },
              { value: 216699, name: "阿拉伯联合酋长国" },
              { value: 216083, name: "厄瓜多尔" },
              { value: 214390, name: "克罗地亚" },
              { value: 205390, name: "保加利亚" },
              { value: 203104, name: "白俄罗斯" },
              { value: 195759, name: "黎巴嫩" },
              { value: 191088, name: "斯洛伐克" },
              { value: 175849, name: "多米尼加" },
              { value: 173591, name: "哥斯达黎加" },
              { value: 172779, name: "丹麦" },
              { value: 165268, name: "玻利维亚" },
              { value: 160544, name: "亚美尼亚" },
              { value: 159044, name: "哈萨克斯坦" },
              { value: 152027, name: "科威特" },
              { value: 149497, name: "立陶宛" },
              { value: 147061, name: "突尼斯" },
              { value: 146921, name: "摩尔多瓦" },
              { value: 144852, name: "卡塔尔" },
              { value: 144583, name: "埃及" },
              { value: 143169, name: "巴勒斯坦" },
              { value: 141453, name: "希腊" },
              { value: 139419, name: "危地马拉" },
              { value: 129774, name: "阿曼" },
              { value: 128370, name: "斯洛文尼亚" },
              { value: 127584, name: "缅甸" },
              { value: 126241, name: "埃塞俄比亚" },
              { value: 123822, name: "洪都拉斯" },
              { value: 122845, name: "马来西亚" },
              { value: 114662, name: "委内瑞拉" },
              { value: 113392, name: "波黑" },
              { value: 113322, name: "爱尔兰" },
              { value: 110796, name: "巴拉圭" },
              { value: 102456, name: "利比亚" },
              { value: 100873, name: "阿尔及利亚" },
              { value: 97127, name: "肯尼亚" },
              { value: 93995, name: "巴林" },
              { value: 92705, name: "尼日利亚" },
              { value: 84709, name: "北马其顿" },
              { value: 81656, name: "吉尔吉斯斯坦" },
              { value: 77350, name: "乌兹别克斯坦" },
              { value: 65818, name: "韩国" },
              { value: 60283, name: "阿尔巴尼亚" },
              { value: 58749, name: "新加坡" },
              { value: 55168, name: "加纳" },
              { value: 53105, name: "阿富汗" },
              { value: 52180, name: "挪威" },
              { value: 50054, name: "黑山" },
              { value: 47355, name: "萨尔瓦多" },
              { value: 47149, name: "卢森堡" },
              { value: 45726, name: "斯里兰卡" },
              { value: 36407, name: "乌干达" },
              { value: 29950, name: "爱沙尼亚" },
              { value: 28532, name: "澳大利亚" },
              { value: 26848, name: "喀麦隆" },
              { value: 25887, name: "纳米比亚" },
              { value: 25208, name: "塞浦路斯" },
              { value: 23316, name: "苏丹" },
              { value: 22855, name: "科特迪瓦" },
              { value: 22645, name: "赞比亚" },
              { value: 22104, name: "乌拉圭" },
              { value: 19964, name: "塞内加尔" },
              { value: 19542, name: "莫桑比克" },
              { value: 18248, name: "刚果（金）" },
              { value: 17767, name: "马达加斯加" },
              { value: 17756, name: "安哥拉" },
              { value: 17194, name: "津巴布韦" },
              { value: 17088, name: "法属波利尼西亚" },
              { value: 15440, name: "博茨瓦纳" },
              { value: 14981, name: "毛里塔尼亚" },
              { value: 13930, name: "马尔代夫" },
              { value: 13904	, name: "几内亚" },
              { value: 13497, name: "法属圭亚那" },
              { value: 13388, name: "马耳他" },
              { value: 13823	, name: "塔吉克斯坦" },
              { value: 13411	, name: "牙买加" },
              { value: 13305	, name: "古巴" },
              { value: 12237	, name: "佛得角" },
              { value: 12179	, name: "叙利亚" },
              { value: 11202	, name: "伯利兹" },
              { value: 10975	, name: "斯威士兰" },
              { value: 10241	, name: "海地" },
              { value: 10000, name: "其他" },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),

            // label: {
            //     color: 'rgba(255, 255, 255, 0.3)'
            // },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)",
              },
              smooth: 0,
              length: -800,
              length2: -10,
            },
            // itemStyle: {
            //     color: '#c23531',
            //     shadowBlur: 200,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            // },
          },
          {
            type: "pie",
            radius: ["18%", "32%"],
            center: ["30%", "50%"],
            label: {
              formatter: " {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#eee",
              borderColor: "#aaa",
              borderWidth: 1,
              borderRadius: 4,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            data: [
              { value: 1919898, name: "死亡" },
              { value: 62675836, name: "治愈" },
              { value: 89398741, name: "累计确诊" },
              { value: 24803007, name: "现有确诊" },
            ],
          },
          {
            type: "pie",
            selectedMode: "single",
            radius: [0, "15%"],
            center: ["30%", "50%"],

            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 15538, name: "新增死亡" },
              { value: 447225, name: "新增治愈" },
              { value: 417545, name: "新增确诊" },
              { value: 880308, name: "新增累计" },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
div.word {
  position: absolute;
  top: 900px;
  left: 10px;
  font-weight: bold;
  font-size: 30px;
  font-family: "新宋体", "楷体";
  color: bisque;
}

div {
  position: relative;
}
div div:nth-child(2) {
  margin-top: 50px;
  left: 50%;
  margin-left: -300px;
}
div div .el-button {
  width: 300px;
}
div div .el-button:hover {
  background-color: #00bec7;
  color: white;
}
</style>
